<template>
    <div class="panl">
        <div v-if="instituteNavKey()" class="panl-title">
            <h4>
                {{instituteNavKey()}}
            </h4>
        </div>
        <div v-if="false" class="bnr">
            <!-- banner -->
        </div>
        <div v-loading="loading" class="panl-class">
            <!-- 应产品需求临时移除分类功能 @GW 2020-06-19 -->
            <el-radio-group v-if="false" v-model="classId" class="panl-line" :disabled="disabled" @change="handleChange($event, 'C')">
                <el-radio :label="defaultClassId" class="line-l">
                    全部分类
                </el-radio>
                <div class="line-r">
                    <el-radio
                        v-for="(item, index) in classTree"
                        :key="index"
                        :label="item[classConf.id]"
                    >
                        {{item[classConf.label]}}
                    </el-radio>
                </div>
            </el-radio-group>
            <div v-if="sortList.length > 0" class="panl-line panl-sort">
                <el-radio-group v-model="sortValue" :disabled="disabled" @change="handleChange($event, 'S')">
                    <el-radio :label="defaultSortValue" class="line-l">
                        综合排序
                    </el-radio>
                    <div class="line-r">
                        <span
                            v-for="(item, index) in sortList"
                            :key="index"
                            @click.prevent="handleChangeSortStatus(item, index)"
                        >
                            <el-radio :label="item.value">
                                {{item.label}}
                                <i :class="`el-icon-${item.sort === 'DESC' ? 'bottom' : 'top'}`"></i>
                            </el-radio>
                        </span>
                    </div>
                </el-radio-group>
                <div class="panl-select">
                    {{type === 's' ? '服务' : type === 'd' ? '需求' : '专家'}}所在地
                    <el-select v-model="area.p" placeholder="请选择" :disabled="disabled" @change="areaChange($event, 'p')">
                        <el-option v-for="(item, index) in province" :key="index" :label="item.label" :value="item.id"></el-option>
                    </el-select>
                    <el-select v-model="area.c" placeholder="请选择" :disabled="disabled" @change="areaChange($event, 'c')">
                        <el-option v-for="(item, index) in city" :key="index" :label="item.label" :value="item.id"></el-option>
                    </el-select>
                </div>
                <jump-center-btn :type="type"></jump-center-btn>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    Component,
    Watch,
    Prop,
    Vue
} from 'nuxt-property-decorator'
import {
    State
} from 'vuex-class'
import {setClassid} from '~/method'
import {provinceCityData} from '~/api/area'
import jumpCenterBtn from '~/components/common/jumpCenterBtn.vue'
@Component({
    name: 'searchForm',
    components: {jumpCenterBtn}
})
export default class SearchForm extends Vue {
    @Prop({
        type: Boolean,
        default: false
    })
    disabled!: boolean
    @Prop({
        type: Boolean,
        default: false
    })
    loading!: boolean
    @Prop({
        type: String,
        default: 's'
    })
    type!: string
    @Prop({
        type: Object,
        default: () => {
            return {
                label: 'desc',
                nodes: 'nodes',
                id: 'id'
            }
        }
    })
    classConf!: any
    @Prop({
        default: ''
    })
    defaultClassId!: string | number
    @Prop({
        default: ''
    })
    defaultSortValue!: string
    @Prop({
        type: Array,
        default: () => [
            // {label: '发布时间', value: 'publishDate'}
        ]
    })
    sortInfo!: [any]
    @Prop()
    defaultClassTree!: any
    classId: string | number = this.defaultClassId
    classTree: any = []
    sortList: any = []
    sort: string = ''
    sortValue: string = this.defaultSortValue || ''
    province: any = [{id: '', label: '全国'}, ...provinceCityData]
    city: any = []
    area: any = {p: '', c: ''}
    created () {
        this.sortInfo.forEach((item) => {
            this.sortList.push({
                ...item,
                sort: 'DESC'
            })
        })
    }
    mounted () {
        const store = this.$store
        const tree = store.state[this.type === 'e' ? 'classid' : 'tree']
        if (
            this.defaultClassTree &&
            this.defaultClassTree.constructor === Array &&
            this.defaultClassTree.length > 0
        ) {
            this.classTree = this.defaultClassTree
            return false
        }
        if (tree.length === 0) {
            setClassid(store, this.type === 'e')
        }
    }
    setTree (val: number, sign: string = 'tree') {
        if (val > 0) {
            const dfId = this.defaultClassId
            const tree = this.$store.state[sign]
            if (dfId) {
                const searchNode = (arr: any) => {
                    for (let i = 0; i < arr.length; i++) {
                        const nodes = arr[i][this.classConf.nodes]
                        if (arr[i][this.classConf.id] === dfId) {
                            this.classTree = nodes
                            break
                        } else if (
                            nodes &&
                            nodes.constructor === Array &&
                            nodes.length > 0
                        ) {
                            searchNode(arr[i][this.classConf.nodes])
                        }
                    }
                }
                searchNode(tree)
            } else {
                this.classTree = tree
            }
        }
    }
    handleChangeSortStatus (item: any, index: number) {
        if (this.disabled) {
            return false
        }
        const sort = item.sort === 'DESC' ? 'ASC' : 'DESC'
        this.sort = sort
        this.sortList[index].sort = sort
        this.sortList = [...this.sortList]
        this.sortValue = item.value
        this.callbackSearch()
    }
    handleChange (val: string | number, type: string) {
        if (type === 'C') {
            this.callbackSearch()
        } else if (type === 'S' && !val) {
            this.sort = ''
            this.callbackSearch()
        }
    }
    areaChange (val: string | number, type: string = 'p') {
        if (type === 'p') {
            this.city = []
            this.area.c = ''
        }
        if (val && type === 'p') {
            this.province.forEach((item: any) => {
                if (val === item.id) {
                    this.city = item.children
                }
            })
        }
        this.callbackSearch()
    }
    callbackSearch () {
        this.$emit('callbackSearch', {
            classId: this.classId,
            sort: this.sort,
            sortValue: this.sortValue,
            area: this.area
        })
    }
    instituteNavKey () {
        const info = this.institute[this.$route.path]
        if (info && (info.cn !== info.tn)) {
            return info.cn
        } else {
            return false
        }
    }
    @Watch('$store.state.treeNum', {immediate: true})
    treeChange (val: number) {
        this.setTree(val)
    }
    @Watch('$store.state.classidNum', {immediate: true})
    treeEpxChange (val: number) {
        this.setTree(val, 'classid')
    }
    @State institute: any
}
</script>

<style lang="scss">
    .panl-title {
        padding: 16px 24px;
        background-color: $white;
        /*margin-bottom: 24px;*/
        h4 {
            font-size: 20px;
            font-weight: bold;
            border-left: 4px solid $blue;
            padding-left: 10px;
            color: $black;
        }
    }
    .bnr {
        width: 100%;
        height: 200px;
        background-color: $border;
        margin-bottom: 24px;
    }
    .panl-class {
        padding: 0 24px;
        background-color: $white;
        .panl-line{
            display: block;
            padding: 10px 0;
            border-bottom: 1px solid #d2d2d2;
            min-height: 54px;
            &:last-child {
                border-bottom: none;
            }
        }
        .el-radio__label{
            padding-left: 0;
            color: #666;
            .el-icon-top{
                color: #fc585f;
            }
            .el-icon-bottom{
                color: #5bccb0;
            }
        }
        .el-radio{
            margin: 0 20px;
            line-height: 32px;
            .el-radio__input{
                display: none;
            }
            &.line-l {
                margin-left: 0;
                .el-radio__label{
                    color: #333;
                    position: relative;
                    &::after {
                        content: '';
                        width: 1px;
                        height: 100%;
                        position: absolute;
                        right: -20px;
                        top: 0;
                        background-color: #d2d2d2;
                    }
                }
            }
            &.is-checked .el-radio__label{
                color: $blue;
            }
        }
        .line-l {
            float: left;
        }
        .line-r {
            margin-left: 80px;
        }
        .panl-sort {
            .el-radio-group,
            .panl-select{
                float: left;
            }
        }
        .panl-button {
            float: right;
            &.el-button--primary{
                background-color: $blue;
                border-color: $blue;
                font-size: $default-font-size;
                &:hover{
                    color: #fff;
                    background-color: lighten($blue, 15);
                    border-color: lighten($blue, 15);
                }
            }
        }
    }
    .panl-select {
        margin-left: 20px;
        font-size: $default-font-size;
        color: #666;
        .el-input.is-focus .el-input__inner{
            border-color: $blue;
        }
        .el-input__inner{
            height: 32px;
            line-height: 32px;
            width: 110px;
            margin-left: 5px;
        }
    }
</style>
